<template>
  <view class="qiun-columns">
    <view class="qiun-charts">
      <canvas
        canvas-id="lineCandle"
        id="lineCandle"
        class="charts"
        :width="cWidth * pixelRatio"
        :height="cHeight * pixelRatio"
        :style="{ width: cWidth + 'px', height: cHeight + 'px' }"
        @touchstart="touchLineA"
        @touchmove="moveLineA"
        @touchend="touchEndLineA"
      ></canvas>
    </view>
  </view>
</template>

<script>
import uCharts from '@/uni-components/u-charts/u-charts.js'

export default {
  props: {
    mData: {
      type: Object,
      default: () => ({
        categories: [],
        series: [],
      }),
    },
  },
  data() {
    return {
      cWidth: '',
      cHeight: '',
      pixelRatio: 1,
      lineCandle: null,
    }
  },
  created() {
    //#ifdef MP-ALIPAY
    uni.getSystemInfo({
      success: function (res) {
        if (res.pixelRatio > 1) {
          //正常这里给2就行，如果pixelRatio=3性能会降低一点
          this.pixelRatio = 2
        }
      },
    })
    //#endif
    this.cWidth = uni.upx2px(654)
    this.cHeight = uni.upx2px(240)
    this.setChartData()
  },
  methods: {
    setChartData() {
      const LineA = this.mData
      this.showLine('lineCandle', LineA)
    },
    showLine(canvasId, chartData) {
      let _self = this
      this.lineCandle = new uCharts({
        $this: _self,
        canvasId: canvasId,
        type: 'line',
        fontSize: 11,
        legend: { show: false },
        padding: [15, 20, 0, 15],
        dataPointShape: true,
        background: '#091522',
        pixelRatio: _self.pixelRatio,
        categories: chartData.categories,
        series: chartData.series,
        animation: true,
        enableScroll: true,
        xAxis: {
          disableGrid: true,
          itemCount: 10, //x轴单屏显示数据的数量，默认为5个
          labelCount: 2,
          scrollShow: false, //新增是否显示滚动条，默认false
          scrollAlign: 'right', //滚动条初始位置
          scrollBackgroundColor: '#F7F7FF', //默认为 #EFEBEF
          scrollColor: '#DEE7F7', //默认为 #A6A6A6
        },
        yAxis: {
          splitNumber: 5,
          gridColor: '#162638',
          format: val => {
            return val.toFixed(0)
          },
        },
        width: _self.cWidth * _self.pixelRatio,
        height: _self.cHeight * _self.pixelRatio,
        extra: {
          line: {
            type: 'straight',
          },
        },
      })
    },
    touchLineA(e) {
      this.lineCandle.scrollStart(e)
      //下面是toolTip事件，如果滚动后不需要显示，可不填写
      this.lineCandle.showToolTip(e, {
        format: function (item, category) {
          return category + ' ' + item.name + ':' + item.data
        },
      })
    },
    moveLineA(e) {
      this.lineCandle.scroll(e)
    },
    touchEndLineA(e) {
      this.lineCandle.scrollEnd(e)
    },
  },
  watch: {
    mData(newMData) {
      this.setChartData()
    },
  },
}
</script>

<style scoped>
/*样式的width和height一定要与定义的cWidth和cHeight相对应*/
.qiun-charts {
  width: 654upx;
  height: 240upx;
  background-color: #091522;
}

.charts {
  width: 654upx;
  height: 240upx;
  background-color: #091522;
}
</style>
